<template>
    <div>
        <div class="notice-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
            <transition name="notice-slide" enter-from-class="notice-slide-enter">
                <p class="notice-item" :key="noticeList.id">
                    {{ noticeList.text}}
                </p>
            </transition>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
let timer=null
let noticeArr = ref([
    { title: '饿了么现推出积分系统！首次下单返总额等比积分点！' },
    { title: '第2次下单返60%积分点！' },
    { title: '第3、4次下单返50%积分点！' },
    { title: '第5次及以后返30%积分点，会员更多返利！' },
    { title: '每百积分无门槛抵一元现金，快来下单啵~' },
])
let number = ref(0)
let noticeList = computed(() => {
    
    return {
        id: number.value,
        text: noticeArr.value[number.value].title,
    };

    
})

let scrollMove = () => {
    timer = setTimeout(() => {
        if (number.value === noticeArr.value.length - 1) {
            number.value = 0;
        } else {
            number.value += 1;
        }

        scrollMove();
    }, 3000);
}
//鼠标进入
let mouseEnter = () => {
    clearInterval(timer);
}
//鼠标离开
let mouseLeave = () => {
    scrollMove();
}

onMounted(() => {
    scrollMove()
})
</script>

<style lang="scss" scoped>
.notice-box {
    width: 100%;
    height: 3em;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: left;
    background: rgb(93, 182, 241);
    padding-left: 2vw;
    z-index: 1000;
}

.notice-item {
    width: 100%;
    height: 100%;
    line-height: 30px;
    box-sizing: border-box;
    position: absolute;
    top: 0%;

}

.notice-slide-enter-active, .notice-slide-leave-active {
    transition: all 0.8s linear;
}

.notice-slide-enter {
    top: 100%;
}


.notice-slide-leave-to {
    top: -100%;
}
</style>